@import "./var"
@import "./mixin"
.container
  background-color: $body-bg
  transition: transform .3s linear

.navbar
  &-fixed
    position: fixed
    top: 0
    right: 0
    left: 0
  $height: 130px
  height: $height
  background-color: transparent
  opacity: 1
  padding: 40px 15px 0 15px
  flex-direction: row
  justify-content: space-between
  align-items: center
  transition: opacity .2s linear
  &-offset-top
    height: 40px
  &-fill
    @include border-bottom(1, solid, #ddd)
  &-title
    color: #ffffff
    font-size: 36px
  &-btn
    $btn-height: 64px
    width: $btn-height
    height: $btn-height
    line-height: $btn-height
    background-color: rgba(0, 0, 0, 0.65)
    border-radius: $btn-height
    text-align: center
    margin-left: 10px 
    color: #ffffff
    &-transparent
      color: $color
      background-color: transparent
  &-icon
    font-size: 40px

.logo
  width: 110px
  height: 40px
  margin-right: 15px

.navbar-sign
  font-size: 32px
  color: #FFFFFF
  padding-left: 10px

.navbar-message
  width: 50px
  text-align: right
  position: relative
  margin-left: 15px
  &-icon
    font-size: 48px
    color: #ffffff
    font-weight: bold

  &-badge
    position: absolute
    top: 0px
    right: 0
    height: 20px
    width: 20px
    background-color: #f5f5f5
    border-radius: 28px

.banner-adv
  margin-top: -40px
  &-img
    width: 750px
    height: 750px * 3 / 4

.bannber-slider
  position: relative
  height: 750px * 3 / 4
  //transform: translateY(-130)
  &-indicator
    height: 30px
    item-color: white
    item-selected-color: $color-primary
    item-size: 15px
    position: absolute
    bottom: 10px
    left: 0
    right: 0
.quick-nav-panel
  background-color: #ffffff
  margin-bottom: 10px

.quick-nav-list

  padding-top: 20px
  padding-bottom: 10px

  &-row
    flex-direction: row
    justify-content: space-between

  &-item
    margin-top: 10px
    text-align: center
    justify-content: center
    align-items: center
    flex: 1
    &-icon
      width: 100px
      height: 100px

    &-title
      font-size: 24px
      padding-top: 16px 
      padding-bottom: 10px 
      color: $color

.showcase
  background-color: #ffffff
  overflow: hidden
  box-sizing: border-box
  $padding: 20px
  overflow: hidden
  &-heading
    height: 78px
    overflow: hidden
    //background-color: #c822b0

  &-title
    font-size: 32px
    line-height: 32px
    height: 52px
    margin-bottom: 6px 
    padding: $padding
    padding-bottom: 0 
    font-weight: 300

  &-subtitle
    padding: 0 $padding 
    font-size: 20px
    line-height: 20px
    color: $color-muted
    text-overflow: clip
    height: 20px

  &-body
    padding: 0 $padding
    //margin-top: 10
    flex-direction: row
    justify-content: space-around
    align-items: center
    //background-color: #000
    flex: 1

  &-price
    flex-direction: row
    align-items: flex-end
    justify-content: center
    margin-top: 10px
    &-val
      font-size: 28px
      height: 28px
      color: $color-primary
      text-align: center
      font-weight: normal
      margin-top: 5px
    &-y
      font-size: 20px
      font-weight: lighter
      color: $color-primary
      height: 20px
    &-small
      text-align: center
      color: $color-muted
      font-weight: 300
      font-size: 20px
      height: 22px
      vertical-align: text-bottom

.showcase-coupon-item
  align-items: center
  flex: 1
  &-pic
    border-radius: 6px

.shopcat-scrollbar
  background-color: #ffffff

.item-list-title-pic
  width: 450px
  height: 60px
.item-list-heading
  //height: 120